<ion-header>
  <ion-toolbar>
    <ion-buttons left>
      <button ion-button icon-left (click)="navBack()">
        <ion-icon class="nav-back" name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>{{user.instName}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="home-default">
  <ion-slides (ionSlideDidChange)="slideChanged()">
    <ion-slide *ngFor="let current of persons">
      <img class="person-image" src="../../assets/imgs/user.svg">
      <div class="person-name">{{current.personName}}</div>
    </ion-slide>
  </ion-slides>

  <ion-list>
    <ion-item>
      <ion-thumbnail item-start>
        <img [class]="getBedAlarmStatus()" src="{{getBedImage()}}">
      </ion-thumbnail>
      <div>{{"bedStatus" | translate}}</div>
      <ion-badge [color]="getBedAlarmStatus()" item-end>{{getBedAlarmString()}}</ion-badge>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img [class]="getWetAlarmStatus()" src="{{getWetImage()}}">
      </ion-thumbnail>
      <div>{{"wetStatus" | translate}}</div>
      <ion-badge [color]="getWetAlarmStatus()" item-end>{{getWetAlarmString()}}</ion-badge>
    </ion-item>

    <ion-item class="item-combo">
      <ion-thumbnail item-start>
        <img [class]="getHeartAlarmStatus()" src="../../assets/imgs/heart.png">
      </ion-thumbnail>
      <div>{{"heart" | translate}}</div>
      <ion-badge [color]="getHeartAlarmStatus()" item-end>{{heart}}&nbsp;{{"heartUnit" | translate}}</ion-badge>
    </ion-item>
    <ion-item>
      <div echarts [options]="hChartOptions" style="height: 240px;width: 100%;" (chartInit)="onHChartInit($event)"></div>
    </ion-item>

    <ion-item class="item-combo">
      <ion-thumbnail item-start>
        <img [class]="getBreatheAlarmStatus()" src="../../assets/imgs/breath.png">
      </ion-thumbnail>
      <div>{{"breathe" | translate}}</div>
      <ion-badge [color]="getBreatheAlarmStatus()" item-end>{{breathe}}&nbsp;{{"heartUnit" | translate}}</ion-badge>
    </ion-item>
    <ion-item>
      <div echarts [options]="bChartOptions" style="height: 240px;width: 100%;" (chartInit)="onBChartInit($event)"></div>
    </ion-item>

    <ion-item>
      <div echarts [options]="moveChartOptions" style="height: 240px;width: 100%;" (chartInit)="onMoveChartInit($event)"></div>
    </ion-item>

    <ion-item class="item-combo">
      <ion-thumbnail item-start>
        <img class="primary" src="../../assets/imgs/sleep.png"/>
      </ion-thumbnail>
      <div>{{"sleepQuality" | translate}}</div>
      <ion-badge [color]="getSleepColor()" item-end>{{sleepAdjustment | translate}}&nbsp;&nbsp;{{sleepDisplay}}{{"sleepUnit" | translate}}</ion-badge>
    </ion-item>
    <ion-item>
      <ion-row>
        <ion-col><div class="value">{{"deepSleep" | translate}}</div></ion-col>
        <ion-col><div class="value">{{"shallowSleep" | translate}}</div></ion-col>
        <ion-col><div class="value">{{"totalSleep" | translate}}</div></ion-col>
      </ion-row>
      <ion-row>
        <ion-col><div class="value">{{deepSleep}}h</div></ion-col>
        <ion-col><div class="value">{{shallowSleep}}h</div></ion-col>
        <ion-col><div class="value">{{totalSleep}}h</div></ion-col>
      </ion-row>
    </ion-item>

    <ion-item (click)="nav2alarm('MOVE')">
      <ion-thumbnail item-start>
        <img class="primary" src="../../assets/imgs/move.png"/>
      </ion-thumbnail>
      <div>{{"move" | translate}}</div>
      <ion-badge color="primary" item-end>{{moveTotal}}</ion-badge>
    </ion-item>

    <ion-item (click)="nav2alarm('AWAY')">
      <ion-thumbnail item-start>
        <img class="primary" src="../../assets/imgs/leave.png">
      </ion-thumbnail>
      <div>{{"awayAlarmTotal" | translate}}</div>
      <ion-badge color="primary" item-end>{{awayAlarmTotal}}</ion-badge>
    </ion-item>

    <ion-item (click)="nav2alarm('WET')">
      <ion-thumbnail item-start>
        <img class="primary" src="../../assets/imgs/wet.png">
      </ion-thumbnail>
      <div>{{"wetAlarmTotal" | translate}}</div>
      <ion-badge color="primary" item-end>{{wetAlarmTotal}}</ion-badge>
    </ion-item>

    <ion-item (click)="nav2alarm('HEART')">
      <ion-thumbnail item-start>
        <img class="primary" src="../../assets/imgs/heart.png">
      </ion-thumbnail>
      <div>{{"heartAlarmTotal" | translate}}</div>
      <ion-badge color="primary" item-end>{{heartAlarmTotal}}</ion-badge>
    </ion-item>

    <ion-item (click)="nav2alarm('BREATHE')">
      <ion-thumbnail item-start>
        <img class="primary" src="../../assets/imgs/breath.png">
      </ion-thumbnail>
      <div>{{"breatheAlarmTotal" | translate}}</div>
      <ion-badge color="primary" item-end>{{breatheAlarmTotal}}</ion-badge>
    </ion-item>
  </ion-list>
</ion-content>